
<script setup lang="ts">
import echartCommon from '/@/components/commonEchart/echartCommon.vue';
import controlledDrawArea from "/@/views/sms/component/factoryDrawArea.vue"
import fetchData from './components/echartsOptions';
import { ref, onMounted,watch } from 'vue';
import { sysOrgTree,GetAllUnreadSysMsg } from '/@/api/sms/sms';
import { sysOrgList } from '/@/api/centerControl/oms';
import cache from '/@/utils/hook/cache';
import Mqtt, { mqttDefaultConnection, mqttSocket } from '/@/utils/mqtt.js';
const { leftOneOptions, leftTwoOptions, leftThreeOptions, rightOneOptions, rightTwoOptions,factoryCockpitData } = fetchData();

//组织架构选择
let recordId = ref('') //组织架构选择id
let treeOptionsValue = ref('')  //默认选中组织架构选择类型
let treeOptions = ref() ; //组织架构选择数据
const dataTree = ref()	//组织架构树型结构数据
let treeInfo = {} // 树形结果数据类存放
let allUnreadSysMsg = ref<any>([]) // 所有未处理消息
const areaDrawData = ref([]);
const areaDrawShow = ref(false)
const areaDrawInfo = ref()

/*** getTree 获取组织架构树 */
const getTree = async (id?:any) => {
	if(id){
		let res:any = await sysOrgTree({ Pids: id })
		if(res.success && res.data.length !== 0){
			treeInfo = res.data[0]
			dataTree.value = treeInfo

	}else{
		dataTree.value = {}
	}
	}
}
dataTree.value = treeInfo


/*** getTree 获取组织架构树类型 */
const getTreeSelect = async()=>{
	const res = await sysOrgList()
	res.data.forEach((item:any) => {
		item.value = item.name
		item.label = item.name
	})
	treeOptions.value = res.data

	if(treeOptions.value){
		recordId.value = treeOptions.value[0].id
		treeOptionsValue.value = treeOptions.value[0].name
		getTree(recordId.value)
	}
}


 /*** acquireChange 搜索下拉框选择的数据 ---- 传给接口数据 */
const acquireChange = (val:any) => {
	recordId.value = val
	getTree(val)
}

watch(factoryCockpitData, (newValue, OldValue, onCleanup) => {
    getdCRiskPartitions()
    onCleanup(() => {
        console.log("清除副作用");
    });
});

const getdCRiskPartitions = ()=>{
/*** 厂区告警位置坐标 ***/
	const dCRiskPartitions = factoryCockpitData.value.dCRiskPartitions;
    if(dCRiskPartitions){
		dCRiskPartitions.forEach((item: any) => {
        if (item.v_Coordinates != null) {
            areaDrawData.value.push(item)
        }
    });
    const items: any = []
    dCRiskPartitions.forEach((item: any) => {
		if (item.v_Coordinates != null) {
			areaDrawShow.value = true;
			// const i = JSON.parse(item);
			items.push(item)
		}
    })
	areaDrawInfo.value = JSON.stringify(items[0])
	}
}

// 加载未读的报警
const getAllUnreadSysMsg = async () => {
	var res = await GetAllUnreadSysMsg();
	allUnreadSysMsg.value = res.data.otherMsg;
	
};

// 创建mqtt 连接
let client: any = null;

const createConnection = () => {
	if (client) return;
	const userInfo = cache.getCache('getUserData')
	mqttSocket.topic = 'Sys_Message_' + userInfo.id;
	const { ...options } = mqttDefaultConnection;
	const connectUrl = mqttSocket.url;
	const subscription = {
		topic: mqttSocket.topic,
		qos: 2,
	};
	const publish = {
		topic: mqttSocket.topic,
		qos: 2,
		payload: '',
	};

	client = new Mqtt(connectUrl, options, publish, subscription, ({ message }: any) => {
		// 接收消息
		const msg = JSON.parse(message);
		if (msg.operate === 1) {
			// 删除
			if (allUnreadSysMsg.value.length > 0) {
				let idx = -1; // 根据id找下标
				allUnreadSysMsg.value.map((item: any, index: number) => {
					if (item.id === msg.id) {
						idx = index;
					}
				});
				if (idx !== -1) {
					allUnreadSysMsg.value.splice(idx, 1);
				}
			}
		} else if (msg.operate === 99) {
			// 清空所有消息
			allUnreadSysMsg.value = [];
		} else {
			// 加
			allUnreadSysMsg.value.unshift(msg);
		}
		// 消息增加后重新判断
		// audioControl(alarmNumInfo);
	});
};


createConnection();

onMounted(async ()=>{
	getTreeSelect()
	getTree(recordId.value)
	getAllUnreadSysMsg();

	
})

</script>
<template>
	<el-row class="containerFactory w-100" justify="space-evenly">
		<el-col :span="6" class="left">
			<el-row class="leftContainer">
				<!-- 设备监控 -->
				<el-col class="leftOne">
                    <div class="herderIcon">
                        <span></span>
                        <span>设备监控</span>
                        <span></span>
                    </div>
					<div class="leftOneContent">
                        <p class="leftOnePie">
							<echartCommon :options="leftOneOptions" />
							<p class="leftOneNumTop">
									<div></div>
									<ul>
										<li>
											<span class="icon"></span>
											<span class="num">
												<span>特种设备总数</span>
												<span style="color: rgb(0, 255, 253);">{{factoryCockpitData.n_EAMSpecialCount}}个</span>
											</span>
										</li>
									</ul>
							</p>
                        </p>
                        
                        <p class="leftOneNum">
                            <p>消防系统</p>
								<ul>
									<li>
										<span></span>
										<span>临期设备</span>
										<span style="color: rgb(255, 187, 0);">{{factoryCockpitData.n_EAMNearExpiredCount}}个</span>
									</li>
									<li>
										<span></span>
										<span>过期设备</span>
										<span style="color: rgb(255, 95, 51);">{{factoryCockpitData.n_EAMOverdueCount}}个</span>
									</li>
								</ul>
                            </p>
                    </div>
				</el-col>
				<!-- 近两周巡检 -->
				<el-col class="leftTwo">
                    <div class="herderIcon">
                        <span></span>
                        <span>近两周巡检任务趋势图</span>
                        <span></span>
                    </div>
                    <p class="leftTwoPie">
                        <echartCommon :options="leftTwoOptions" />
                    </p>
                </el-col>
				<!-- 近两周隐患 -->
				<el-col class="leftThree">
                    <div class="herderIcon">
                        <span></span>
                        <span>近两周隐患任务趋势图</span>
                        <span></span>
                    </div>
                    <p class="leftThreePie">
                        <echartCommon :options="leftThreeOptions" />
                    </p>
                    <p class="leftThreeNum">
                        <div class="one">
                            <span>待处理</span>
                            <p>{{ factoryCockpitData.n_HDHiddenTodoCount }}</p>
                        </div>
                        <div class="two">
                            <span>累计处理</span>
                            <p>{{ factoryCockpitData.n_HDHiddenFinishedCount }}</p>
                        </div>
                        <div class="three">
                            <span>历史处理</span>
                            <p>{{ factoryCockpitData.n_HDHiddenAllCount }}</p>
                        </div>
                    </p>
                </el-col>
			</el-row>
		</el-col>
		<el-col :span="11" class="middle">
			<el-row class="middleContainer">
				<!-- 中间头部 -->
				<el-col class="middleOne">
                    <div class="middleOneNum">
						<span>安全生产无事故天数</span>
						<p>{{ parseInt(factoryCockpitData.n_SafeProductionDays) }}</p>
					</div>
                    <div class="middleOneProgress">
						<div class="progressLeft hr-flex-center">分区风险等级占比情况</div>
							<ul class="progressRight">
								<li>
									<p class="leftTwoRiskIcon"></p>
									<div class="leftTwoRiskInfo">
										<p class="leftTwoRiskInfoName">
											<span>重大风险</span>
											<span class="num">{{ factoryCockpitData.n_RiskPartitionGreatCount }}</span>
										</p>
										<p class="leftTwoRiskPercent">
											<el-progress :percentage="factoryCockpitData.n_RiskPartitionGreatCount" color="rgb(255, 95, 51)">
											</el-progress>
										</p>
									</div>
								</li>
								<li>
									<p class="leftTwoRiskIcon"></p>
									<div class="leftTwoRiskInfo">
										<p class="leftTwoRiskInfoName">
											<span>较大风险</span>
											<span class="num">{{ factoryCockpitData.n_RiskPartitionLargerCount }}</span>
										</p>
										<p class="leftTwoRiskPercent">
											<el-progress :percentage="factoryCockpitData.n_RiskPartitionLargerCount" color="rgb(255, 187, 0)">
											</el-progress>
										</p>
									</div>
								</li>
								<li>
									<p class="leftTwoRiskIcon"></p>
									<div class="leftTwoRiskInfo">
										<p class="leftTwoRiskInfoName">
											<span>一般风险</span>
											<span class="num">{{ factoryCockpitData.n_RiskPartitionGeneralCount }}</span>
										</p>
										<p class="leftTwoRiskPercent">
											<el-progress :percentage="factoryCockpitData.n_RiskPartitionGeneralCount" color="rgb(255, 242, 0)">
											</el-progress>
										</p>
									</div>
								</li>
								<li>
									<p class="leftTwoRiskIcon"></p>
									<div class="leftTwoRiskInfo">
										<p class="leftTwoRiskInfoName">
											<span>低风险</span>
											<span class="num">{{ factoryCockpitData.n_RiskPartitionLowCount }}</span>
										</p>
										<p class="leftTwoRiskPercent">
											<el-progress :percentage="factoryCockpitData.n_RiskPartitionLowCount" color="rgb(0, 255, 253)">
											</el-progress>
										</p>
									</div>
								</li>
							</ul>
                    </div>
                    <div class="middleOneText">
						<div class="t">公共安全预警</div>
						<ul>
							<li>全国预警信息发布情况</li>
						</ul>
						<p v-for="item in factoryCockpitData.pubSafetyWarnings" :key="item.id" >
							<p>{{ item.v_WarningsContent }}</p>
						</p>
					</div>
                </el-col>
				<!-- 中间 -->
				<el-col class="middleTwo">
					<controlledDrawArea :coordinatesArr="areaDrawData" :drawInfo="areaDrawInfo"
                            :isUseDialog="areaDrawShow">
                        </controlledDrawArea>
				</el-col>
				<!-- 表格 -->
				<el-col class="middleThree">

					<el-table :data="allUnreadSysMsg" style="width: 100%;height:100%;" border>
                            <el-table-column label="序号" fixed type="index" min-width="40" :show-overflow-tooltip="true"
                                align="center" />
                            <el-table-column  min-width="60" :show-overflow-tooltip="true" prop="n_Type" label="状态"
                                align="center" >
								<template  #default="scope">
									<span style="color: red;">未处理</span>
								</template>
							</el-table-column>
                            <el-table-column min-width="40" :show-overflow-tooltip="true" prop="v_ServiceName" label="类型"
                                align="center" />
								<el-table-column min-width="80" :show-overflow-tooltip="true" prop="v_Title" label="标题"
                                align="center" />
								<el-table-column min-width="150" :show-overflow-tooltip="true" prop="v_Content" label="内容"
                                align="center" />
								<el-table-column min-width="100" :show-overflow-tooltip="true" prop="createdTime" label="时间"
                                align="center" />
								
                        </el-table>
				</el-col>
			</el-row>
		</el-col>
		<el-col :span="6" class="right">
			<div class="rightContainer">
				<!-- 水电气用日、周、月、年使用详情趋势图 -->
				<div class="rightOne">
					<div class="herderIcon">
                        <span></span>
                        <span>水电气用日、周、月、年使用详情趋势图</span>
                        <span></span>
                    </div>
					<ul class="rightOneChoose">
						<li>日</li>
						<li>周</li>
						<li>月</li>
						<li>年</li>
					</ul>
					<div class="rightOneBar"><echartCommon :options="rightOneOptions" /></div>
				</div>
				<!-- 企业今日在岗人数 -->
				<div class="rightTwo">
					<div class="herderIcon">
                        <span></span>
                        <span>企业今日在岗人数</span>
                        <span></span>
                    </div>
					<div class="rightTwoPie"><echartCommon :options="rightTwoOptions" /></div>
				</div>
				<!-- 组织架构 -->
				<div class="rightThree">
					<div class="herderIcon">
                        <span></span>
                        <span>组织架构</span>
                        <span></span>
                    </div>
					<div class="rightThreeSelect">
						<el-select v-model="treeOptionsValue" @change="acquireChange" placeholder="Select" style="width: 240px">
							<el-option
								v-for="item in treeOptions"
								:key="item.value"
								:label="item.label"
								:value="item.id"
							/>
						</el-select>
					</div>
					<div class="rightThreeTree" v-show="dataTree?.id" >
						<vue3-tree-org
							:data="dataTree"
							:label="dataTree.title"
							:horizontal="false"
							:node-draggable="false"
							:label-style="{
								background: '#fff',
								color: '#5e6d82',
							}"
							node-key="id"
							default-expand-level="1"
							:default-expand-keys="[recordId]"
							:collapsable="true"
							:disabled="false"
							:tool-bar="false"
						>
					 <!-- 自定义节点内容 -->
					 <template v-slot="{node}">
						<div class="tree-org-node__text node-label">
							<template v-if="node.$$data">
								<span>{{node.$$data.title}}</span>
							</template>
						</div>
					</template>
					
					</vue3-tree-org>
					</div>
						
					</div>
				</div>
		</el-col>
	</el-row>
</template>



<style scoped lang="scss">
.containerFactory {
	position: absolute;
	top: 0;
	left: 0;
	padding-bottom: 10px;
	padding-top: 10px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url(/@/assets/jsc_images/bg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #fff;
	//小标题
	.herderIcon {
		display: flex;
		justify-content: space-evenly;
		height: 30px;
		line-height: 30px;

		span {
			height: 30px;
			line-height: 30px;

			&:nth-child(1) {
				width: 5%;
				background-image: url(/@/assets/jsc_images/icon1.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 50%;
			}

			&:nth-child(2) {
				flex: 1;
				padding-left: 3px;
				text-align: start;
			}

			&:nth-child(3) {
				margin: auto 0;
				background-image: url(/@/assets/jsc_images/icon2.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center;
				height: 3px;
				width: 20%;
			}
		}
	}
	.left {
		height: 100%;
		.leftContainer {
			height: 100%;
			display: flex;
			align-content: space-between;
			.leftOne {
				height: 30%;
				position: relative;
				.leftOneContent {
					height: calc(100% - 30px);

					.leftOnePie {
						height: 75%;
						width: 100%;
						overflow: hidden;
						border: 1px solid rgba(0, 0, 0, 0);
						position: relative;
					}

					.leftOneNumTop {
						height: 28%;
						width: 45%;
						position: absolute;
						right: 0;
						bottom: 0;
						div{
							width: 100%;
							height: 1px;
							background: rgba(255, 255, 255, 0.6);
							margin-bottom: 10px;
						}
						ul{
							display: flex;
                            justify-content: space-between;
                            height: calc(100% - 18px);
							li{
								display: flex;
                                align-items: center;
								height: 30px;
								width: 100%;
								box-sizing: border-box;
								border: 1px solid rgba(255, 255, 255, 0.1);
								background: rgba(255, 255, 255, 0.14);
								.icon{
									height: 30px;
									width: 30px;
									background-image: url(/@/assets/jsc_images/icon32.png);
									background-repeat: no-repeat;
									background-position: center;
									background-size: 100% 100%;
								}
								.num{
									flex: 1;
									margin-left: 20px;
									display: flex;
									justify-content: space-evenly
								}
							}
						}
						
					}

					.leftOneNum {
						height: 20%;
						ul {
                            display: flex;
                            justify-content: space-between;
                            height: 100%;

                            li {
                                display: flex;
                                justify-content: space-evenly;
                                align-items: center;
                                width: 45%;
                                height: 80%;

                                &:nth-child(1) {
                                    background-image: url(/@/assets/jsc_images/icon10.png);
                                    background-repeat: no-repeat;
                                    background-size: 100% 100%;

                                    span {
                                        &:nth-child(1) {
                                            display: block;
                                            width: 30px;
                                            height: 30px;
                                            background-image: url(/@/assets/jsc_images/icon32.png);
                                            background-repeat: no-repeat;
                                            background-position: center;
                                            background-size: 60%;
                                        }
                                    }
                                }

                                &:nth-child(2) {
                                    background-image: url(/@/assets/jsc_images/icon11.png);
                                    background-repeat: no-repeat;
                                    background-size: 100% 100%;

                                    span {
                                        &:nth-child(1) {
                                            width: 30px;
                                            height: 30px;
                                            display: block;
                                            background-image: url(/@/assets/jsc_images/icon33.png);
                                            background-repeat: no-repeat;
                                            background-position: center;
                                            background-size: 60%;
                                        }
                                    }
                                }
                            }
                        }
					}
				}
			}
			.leftTwo {
				height: 30%;
				.leftTwoPie {
					height: 100%;
				}
			}
			.leftThree {
				height: 40%;
				.leftThreePie {
					height: 70%;
				}
				.leftThreeNum {
					display: flex;
					justify-content: space-between;
					div {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 30%;
						height: 50px;
						background-repeat: no-repeat;
						background-size: 100% 100%;
						span {
							margin-right: 6px;
							font-size: 14px;
						}
						p {
							font-size: 28px;
						}
					}
					.one {
						color: #ff3c20;
						background-image: url(/@/assets/fac_jsc_images/icon1.png);
					}
					.two {
						color: #00fffd;
						background-image: url(/@/assets/fac_jsc_images/icon2.png);
					}
					.three {
						color: #ffb600;
						background-image: url(/@/assets/fac_jsc_images/icon3.png);
					}
				}
			}
		}
	}
	.middle {
		height: 100%;
		.middleContainer {
			height: 100%;
			display: flex;
			align-content: space-between;
			.middleOne {
				height: 22%;
				display: flex;
				justify-content: space-between;
				& > div {
					height: 95%;
				}
				.middleOneNum {
					margin-left: 0;
					width: 23%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background-image: url(/@/assets/fac_jsc_images/icon4.png);
					background-repeat: no-repeat;
					background-size: 100% 100%;
					span {
						font-size: 16px;
						text-align: center;
					}
					p {
						margin-top: 5px;
						font-size: 28px;
						color: #00fffd;
						font-weight: 700;
						line-height: 35px;
					}
				}
				.middleOneProgress {
					width: 35%;
					display: flex;
					justify-content: space-between;
					.progressLeft {
						width: 13%;
						text-align: center;
						box-sizing: border-box;
						border: 1px solid rgba(255, 255, 255, 0.2);
						background: rgba(0, 255, 253, 0.1);
					}
					.progressRight {
						width: 86%;
						li {
							display: flex;
							height: 25%;
							width: 100%;

							.leftTwoRiskIcon {
								width: 10%;
								height: 100%;
								background-image: url(/@/assets/jsc_images/icon16.png);
								background-repeat: no-repeat;
								background-position: center;
								background-size: 90%;
								margin-right: 2px;
							}

							.leftTwoRiskInfo {
								width: 90%;
								.leftTwoRiskInfoName {
									display: flex;
									justify-content: space-between;
									align-content: space-around;
									padding-right: 4px;
									padding-top: 6px;
									height: 65%;

									span {
										&:nth-child(1) {
											font-size: 14px;
										}
									}

									.num {
										font-size: 22px;
										color: rgb(255, 95, 51);
									}
								}

								.leftTwoRiskPercent {
									height: 24%;
								}
							}

							&:nth-child(2) {
								.leftTwoRiskIcon {
									background-image: url(/@/assets/jsc_images/icon17.png);
								}

								.leftTwoRiskInfo {
									.leftTwoRiskInfoName {
										.num {
											color: rgb(255, 187, 0);
										}
									}
								}
							}

							&:nth-child(3) {
								.leftTwoRiskIcon {
									background-image: url(/@/assets/jsc_images/icon18.png);
								}

								.leftTwoRiskInfo {
									.leftTwoRiskInfoName {
										.num {
											color: rgb(255, 242, 0);
										}
									}
								}
							}

							&:nth-child(4) {
								.leftTwoRiskIcon {
									background-image: url(/@/assets/jsc_images/icon19.png);
								}

								.leftTwoRiskInfo {
									.leftTwoRiskInfoName {
										.num {
											color: rgb(0, 255, 253);
										}
									}
								}
							}
							::v-deep .el-progress__text {
								display: none;
							}
						}
					}
				}
				.middleOneText {
					width: 40%;
					color: rgba(255, 255, 255, 0.7);
					box-sizing: border-box;
					border: 1px solid rgba(255, 255, 255, 0.1);
					.t {
						background: rgba(0, 255, 253, 0.2);
						width: 100%;
						height: 30px;
						text-align: center;
						line-height: 30px;
						color: rgb(0, 255, 253);
						font-size: 14px;
					}
					li {
						
						margin: 5px 20px;
						margin-bottom: 1px;
						color: rgb(255, 255, 255);
						font-size: 14px;
						font-weight: 700;
					}
					p {
						height: calc(100% - 70px);
						overflow-y: scroll;
						margin-left: 20px;
						margin-right: 20px;
						text-align: justify;
						font-size: 12px;
					}
				}
			}
			.middleTwo {
				height: 50%;
			}
			.middleThree {
				height: calc(35% - 50px);
			}
		}
	}
	.right{
		height: 100%;
		.rightContainer{
			display: flex;
			flex-direction: column;
            align-content: space-between;
            height: 100%;
			.rightOne{
				height: 32%;
				.rightOneChoose{
					display: flex;
					justify-content: space-between;
					align-content: center;
					overflow: hidden;
					cursor: pointer;
					height: 30px;
					li{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 22%;
						background-color: #00fffd;
						height: 96%;
						box-sizing: border-box;
						border: 1px solid rgba(255, 255, 255, 0.1);
						background: rgba(255, 255, 255, 0.1);
					}
				}
				.rightOneBar{
					height: calc(100% - 65px);
					width: 100%;
				}
			}
		.rightTwo{
			height: 26%;
			.rightTwoPie{
				height: 75%;
				width: 100%;
				overflow: hidden;
			}
			
		}
		.rightThree{
			height: 40%;
			.rightThreeSelect{
				text-align: center;
				height: 30px;
				background: rgba(0, 255, 253, 0.1);
			}
			.rightThreeTree{
				height: 80%;
			}
			:deep(.el-select){
				width: 160px !important;
			}
			:deep(.el-select .el-input__wrapper){
				box-shadow: none!important;
			}
			:deep(.zm-tree-org .zoom-container){
				transform: scale(0.7) !important;
			}
		}
		}
		
		
	}
	::v-deep .el-table {
        padding: 10px 0;
        background-color: hsla(120, 100%, 50%, 0);
        --el-table-border: 1px solid #80808000;
        --el-table-row-hover-bg-color: rgba(255, 255, 255, 0.1) --el-table-tr-bg-color: hsla(120, 100%, 50%, 0);
        --el-table-border-color: #80808000;
        --el-table-header-bg-color: hsla(120, 100%, 50%, 0);

        thead {
            background-color: rgba(0, 255, 253, 0.2);
        }

        tr {
            color: #fff;
            background-color: hsla(120, 100%, 50%, 0);

            td {
                background-color: hsla(120, 100%, 50%, 0);
            }
        }

        th {
            background-color: hsla(120, 100%, 50%, 0);
        }
    }
	:deep(.zm-tree-org){
        background: rgba($color: (#FFFFFF), $alpha: 0)!important;
    }
	// 树item边框
	:deep(.tree-org-node__inner){
        box-shadow: none!important;
		border: 1px solid rgba(255, 255, 255, 0.2)!important;
        background-color: rgba(255, 187, 0, 0.2) !important;
		color: #ffffff !important;
    }
	:deep(.tree-org-node__children .tree-org-node__inner){
		background-color: rgba(0, 255, 253, 0.1) !important;	
	}
	:deep(.tree-org-node.is-leaf, .tree-org-node.collapsed){
		padding-right: 5px !important;
		padding-left: 5px !important;
	}
}
</style>